<template>
  <div class="waringType">
    <el-row>
      <el-col :span="3">
        <div class="wt-title">
          <div>预警指令</div>
          <div>
            <img src="@/assets/images/index/index-step-3.png" alt="" />
          </div>
          <div>{{ total }}条</div>
        </div>
      </el-col>
      <el-col :span="7">
        <radar-chart :radarData="radarData" />
      </el-col>
      <el-col :span="7">
        <pie-chart :pieData="pieData" />
      </el-col>
      <el-col :span="7" style="border: 0">
        <bar-chart :statusList="statusList" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import radarChart from "@/views/statistics/forewarning/statistic/components/radarChart.vue";
import pieChart from "@/views/statistics/forewarning/statistic/components/pieChart.vue";
import barChart from "@/views/statistics/forewarning/statistic/components/barcharts.vue";
export default {
  name: "waringType",
  props: {
    // 雷达图数据
    radarData: {
      type: Array,
      default: [],
    },
    // 饼图数据
    pieData: {
      type: Array,
      default: [],
    },
    statusList: {
      type: Array,
      default: [],
    },
    // 饼图数据
    total: {
      type: [Number, String],
      default: 0,
    },
  },
  components: {
    radarChart,
    pieChart,
    barChart,
  },
};
</script>

<style scoped lang="scss">
.el-col {
  border-right: 1px solid #c4c4c4;
}
.waringType {
  .wt-title {
    width: 100%;
    padding-top: 30px;
    text-align: center;
    color: #333333;
    font-weight: bold;
    img {
      margin: 5px 0;
    }
  }
}
</style>
